import { useInterval } from 'ahooks'
import React, { FC, useEffect, useState } from 'react'
import { useCommonFunc } from '../hooks/useCommon'
import { FuncVoid } from '../types'
import { ProgressCircle } from 'antd-mobile';
import useCountdown from 'ahooks/lib/useCountDown';


const MyDao:FC<{
    total?:number
    style?:object
    onEnd?:FuncVoid
    size?:number
    color?:string
    fillColor?:string
    flag?:boolean
    text?:string
}> = ({
    total=5,
    style,
    onEnd=()=>{
    },
    size=60,
    color="fff",
    fillColor="#00B578",
    flag,
    text
}) => {
    const [percent,setPercent] = useState<number>(0)
    const sum = 100
    const interval = total * 1000 / sum
    const { gotopage } = useCommonFunc() 

    // 0-100
    const clear = useInterval(()=>{
        if(percent<sum){
            setPercent(percent+1)
        }else{
            // 运行结束
            clear()
            onEnd()
        }
    },interval)

    // 100-0
    const [timeDown] = useCountdown({
        leftTime:total * 1000,
        interval:interval,
        onEnd:()=>{
            onEnd()
        }
    })


    useEffect(()=>{
        return()=>{
            clear()
        }
    },[])

  return (
    <div className='dao'
        style={{
            position:"fixed",
            top:20,
            right:20,
            zIndex:10,
            ...style
        }}
        onEnded={onEnd}
    >
        <ProgressCircle  percent={flag ? Math.floor(timeDown/interval) : percent} style={{ '--size':size+"px",'--fill-color': fillColor }}>
            <span className='ft14' style={{color:color}}>{flag ? Math.floor(timeDown/interval) : percent}%</span>
            {
                text && <p style={{color:color,marginTop:3}}>{text}</p>
            }
        </ProgressCircle>
    </div>
  )
}

export default MyDao